<template>
	<view class="big-box flex-col align-center"
		:style="{background: 'url('+info.avatar+') #16161e no-repeat top center / 100% 750rpx'}">
		<top-navigation bgColor='#FFFFFF00' :isBack="true">
			<!-- <text slot='center-slot' class="center-slot"></text> -->
			<view slot='right-slot' class="center-slot" @tap="$navto('/pages/mine/appCenter/storeCenter/sendLog')">
				记录
			</view>
		</top-navigation>
		<u-toast ref="uToast"></u-toast>
		<view class="store-info flex-col align-center">
			<image class="store-ava" :src="info.avatar" mode=""></image>
			<view class="justify-start align-center">
				<view class="name">
					{{info.nickname}}
				</view>
				<image class="name-l" :src="info.shop_icon" mode="heightFix"></image>
			</view>
			<view class="tab justify-around align-center">
				<view class="flex-col align-center">
					<view class="tab-num">
						{{info.son_num}}
					</view>
					<view class="tab-text">
						下级店长
					</view>
				</view>
				<view class="justify-center align-center" @tap="">
					<!-- <view class="">
						<image class="tab-icon" src="/static/images/mine/center.png" mode=""></image>
					</view> -->
					<view class="is-online" :style="{color:is_online?'#0BFF8D':'#FFF'}">
						{{is_online?'在线':'隐身'}}
					</view>
					<u-switch v-model="is_online"
					size="20"
					asyncChange 
					 activeColor="#0BFF8D"
					 inactiveColor="#000"
					 @change="changeOnline"></u-switch>
				</view>
			</view>
		</view>

		<view class="feature justify-between">
			<view class="feature-box" @click="featureTap(index)" v-for="item,index in hot_goods" :key="index">
				<image class="hot-category" :src="item.image" mode=""></image>
				<view class="info flex-col justify-between">
					<view class="feature-title u-line-2">
						{{item.name}}
					</view>

					<view class="">
						<view class="justify-between align-center">
							<view class="price justify-start align-end">
								<text class="money">¥</text> {{item.price}}
							</view>
							<view class="ku-cun">
								库存{{item.number}}
							</view>
						</view>
						<view class="use-btn justify-center align-center" @tap="sendGood(item)">
							使用
						</view>
					</view>

				</view>

			</view>
		</view>
		<modal-confirm :data='goodsInfo' :isShow='goodsShow' @close="goodsShow=false"
			@update='getIndex'></modal-confirm>
	</view>
</template>

<script>
	import modalConfirm from './modal-confirm.vue'
	export default {
		components: {
			// 注册组件
			modalConfirm
		},
		data() {
			return {
				is_online:false,
				downloadShow: true,
				current: 0,
				moneyShow: false,
				loading: false,
				hot_goods: [],

				info: {},
				top_goods: [],
				goodsShow: false,
				goodsInfo: {},

			}
		},
		onLoad() {
			this.getIndex()
			const value = uni.getStorageSync('downloadShow')
			if (value) {
				this.downloadShow = !value
			}
		},
		methods: {
			changeOnline(e){
				console.log('在线',e);
				this.setOnline()
			},
			async setOnline(){
				if(	this.loading) return
				this.loading = true
				let url = '/api/v1/set_manager_online'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url,
				{
					is_online:this.is_online?0:1
				})
				this.loading = false
				if (code == 200) {
					console.log(data, '静态资源');
					this.is_online = data.is_online == 1?true:false
				
					// this.imgList = data.list || []
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
			},
			sendGood(v) {
				this.goodsInfo = v
				this.goodsShow = true
			},

			getCenter() {
				this.$refs.uToast.show({
					message: '敬请期待'
				})
			},
			async getIndex() {
				let url = '/api/v1/manager'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url)
				if (code == 200) {
					console.log(data, '静态资源');
					this.loading = false
					this.is_online = data.is_online == 1?true:false
					this.info = data
					this.hot_goods = data.goods_list || []

					// this.imgList = data.list || []
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
			},
			featureTap(e) {
				return
				console.log(e);
				if (e > 1) {
					return
				}

			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		background: #16161e;
		min-height: 100vh;

		&::before {
			content: "";
			position: absolute;
			/* 一定要用绝对定位 */
			width: 100%;
			height: 1000rpx;
			backdrop-filter: blur(30px);
			/* 模糊半径 */
		}

		.center-slot {
			color: #FFF;
			font-size: 26rpx;

		}

		.store-info {
			margin-top: 130rpx;
			position: relative;
			z-index: 1;

			.tab {
				margin-top: 20rpx;
				width: 690rpx;
				height: 202rpx;
				background: #21202E;
				border-radius: 8rpx;
				.is-online{
					margin-right: 10rpx;
				}
				.tab-text {
					margin-top: 30rpx;
					color: #D2D2DC;
					font-size: 24rpx;
				}

				.tab-num {
					color: #FFF;
					font-size: 44rpx;
					font-weight: bold;
				}

				.tab-icon {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.store-ava {
				width: 178rpx;
				height: 178rpx;
				border-radius: 16rpx;
				margin-bottom: 21rpx;
			}

			.name {
				color: #FFF;
				font-size: 42rpx;
				font-weight: bold;
				margin-right: 20rpx;
			}

			.name-l {
				height: 32rpx;
			}
		}


		.menu-box {
			background: #16161e;
			width: 100%;
			padding: 0 30rpx;
			position: relative;
			z-index: 2;

			.grid-l {
				width: 340rpx;
				height: 456rpx;
			}

			.grid-r {
				width: 326rpx;
				height: 218rpx;
			}
		}

		.banner {
			margin-bottom: -50rpx;
			width: 100vw;
			position: relative;

			.l-banner-btn {
				width: 80rpx;
				height: 80rpx;
				top: 19.4375rem;
				left: 0;
				position: absolute;
				padding: 40rpx;
				z-index: 1111;
				box-sizing: content-box;
			}

			.r-banner-btn {
				width: 80rpx;
				height: 80rpx;
				top: 19.4375rem;
				right: 0;
				position: absolute;
				padding: 40rpx;
				z-index: 1111;
				box-sizing: content-box;
			}
		}
	}

	.top-box {
		margin-top: 48rpx;
		width: 690rpx;

		.hot-title {
			width: 156rpx;
			height: 35rpx;
		}



	}

	.feature {
		margin-top: 73rpx;
		flex-wrap: wrap;
		padding: 0 30rpx 0rpx;
		box-sizing: border-box;
		width: 100%;

		.feature-title {
line-height: 1.1875rem;
			font-size: 28rpx;
			color: #FFF;
		}

		.price {
			font-weight: bold;
			font-size: 36rpx;
			color: #27ff92;

			.money {
				font-size: 28rpx;

			}
		}

		.ku-cun {
			font-size: 19rpx;
			color: #605F78;
		}

		.feature-box {
			margin-bottom: 32rpx;
			width: 328rpx;
			background: #20202c;
			box-shadow: 0rpx 6rpx 35rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 16rpx;
			position: relative;
			overflow: hidden;
			padding-bottom: 30rpx;


			.hot-category {
				width: 328rpx;
				height: 328rpx;
			}

			.info {
				padding: 22rpx 24rpx 0;
				height: 220rpx;

				.use-btn {
					margin: 20rpx auto 0;
					width: 255rpx;
					height: 50rpx;
					border-radius: 8rpx;
					background: #0BFF8D;
					color: #000;
					font-size: 25rpx;
					font-weight: bold;
				}
			}
		}

	}

</style>